<script setup>
</script>

<template>
  <div class="common-layout">
    <el-container class="layout-container">
      <el-header class="layout-header">
        <GlobalHeader />
      </el-header>

      <el-main class="layout-main">
        <router-view />
      </el-main>

      <el-footer class="layout-footer">
        <GlobalFooter />
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  height: 100vh;
  overflow: hidden; /* 防止页面滚动条 */
  margin: 0;
  padding: 0;
  background-color: #f5f7fa;
}

.layout-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.layout-header {
  padding: 0;
  height: 60px;
  line-height: 60px;
}

.layout-main {
  flex: 1;
  overflow: auto; /* 内容过多时 main 自己滚动 */
  padding: 20px;
  background-color: #fff;
}

.layout-footer {
  background-color: #f0f2f5;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #666;
}
</style>

<style>
/* 👇 全局取消浏览器默认 margin 并强制满高 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
